<template>
  <view class="detail">
    <view class="detail-title"> 基本信息 </view>
    <view class="detail-row" v-if="info.number">
      <view class="detail-label">工单编号</view>
      <view class="detail-value">{{ info.number || "--" }}</view>
    </view>
    <view class="detail-row" v-if="info.title">
      <view class="detail-label">工单标题</view>
      <view class="detail-value">
        <uv-tags
          v-if="info.type == 1"
          text="急"
          type="error"
          size="mini"
          style="margin-right: 10rpx"
        />
        {{ info.title || "--" }}
      </view>
    </view>
    <view class="detail-row" v-if="info.projectName">
      <view class="detail-label">关联项目</view>
      <view class="detail-value">{{ info.projectName || "--" }}</view>
    </view>
    <view class="detail-row" v-if="info.createByNickName">
      <view class="detail-label">发起人员</view>
      <view class="detail-value">{{ info.createByNickName || "--" }}</view>
    </view>
    <view class="detail-row" v-if="info.maintenanceUserNickName">
      <view class="detail-label">处理人员</view>
      <view class="detail-value">{{ info.maintenanceUserNickName || "--" }}</view>
    </view>
    <view class="detail-row" v-if="info.signAddress">
      <view class="detail-label">签到地址</view>
      <view class="detail-value">
        <uv-icon :name="iconMap" style="margin-right: 20rpx" />
        <view>{{ info.signAddress || "--" }}</view>
      </view>
    </view>
    <view class="detail-row">
      <view class="detail-label">当前状态</view>
      <view class="detail-value">{{ statusLabel(info.status) }}</view>
    </view>
    <view class="detail-row" v-if="info.createTime">
      <view class="detail-label">提交时间</view>
      <view class="detail-value">{{ info.createTime || "--" }}</view>
    </view>
    <view class="detail-row" v-if="info.overTime">
      <view class="detail-label">处理时间</view>
      <view class="detail-value">{{ info.overTime || "--" }}</view>
    </view>
    <view class="detail-title"> 工单内容 </view>
    <view class="detail-row" v-if="info.positionInformation">
      <view class="detail-label">位置信息</view>
      <view class="detail-floor">
        <view
          v-for="(floor, k) in info.positionInformation?.split(',')"
          :key="k"
          class="floor-item"
        >
          {{ floor }}
        </view>
      </view>
    </view>
    <view class="detail-row" v-if="info.systemName">
      <view class="detail-label">系统</view>
      <view class="detail-value">{{ info.systemName || "--" }}</view>
    </view>
    <view class="detail-row" v-if="info.deviceName">
      <view class="detail-label">设备</view>
      <view class="detail-value">{{ info.deviceName || "--" }}</view>
    </view>
    <view class="detail-row" v-if="info.content">
      <view class="detail-label">故障内容</view>
      <view class="detail-value">{{ info.content || "--" }}</view>
    </view>
    <view class="detail-row" v-if="info.locationDescription">
      <view class="detail-label">位置描述</view>
      <view class="detail-value">{{ info.locationDescription || "--" }}</view>
    </view>
    <view class="detail-row" v-if="info.remark">
      <view class="detail-label">备注</view>
      <view class="detail-value">{{ info.remark || "--" }}</view>
    </view>
    <view class="detail-title"> 附件 </view>
    <view class="image-box" v-if="info.annexUrl">
      <view v-for="(url, k) in info.annexUrl?.split(',')" :key="k" class="image-item">
        <image :src="webSrc(url)" mode="aspectFill" @click="previewImage(k)" />
      </view>
      <view
        v-for="(url, k) in info?.examineAnnexUrl?.split(',')"
        :key="k"
        class="image-item"
      >
        <image
          :src="webSrc(url)"
          mode="aspectFill"
          @click="previewImage(k, 'examineAnnexUrl')"
        />
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref } from "vue";
import { webSrc } from "@/common/mothed.js";
import iconMap from "@/static/sign/icon_map.png";

const props = defineProps({
  // 工单信息
  info: {
    type: Object,
    default: "",
  },
});

const statusList = ref([
  // 状态列表
  { label: "待负责人审批", value: 1 },
  { label: "待业主审批", value: 2 },
  { label: "被退回", value: 3 },
  { label: "重新发起", value: 4 },
  { label: "维修接单", value: 5 },
  { label: "维修结束", value: 6 },
  { label: "已完结", value: 7 },
  { label: "复验不通过", value: 8 },
  { label: "撤销工单", value: 9 },
  { label: "任务发布", value: 10 },
  // { label: "业主退回", value: 11 },
  // { label: "转回机构处理", value: 12 },
  // { label: "待二次复验", value: 13 },
  // { label: "二次复验不通过", value: 14 },
]);

// 状态名称
const statusLabel = (status) => {
  let row = statusList.value.find((item) => item.value === status);
  return row ? row.label : "--";
};

// 预览图片
const previewImage = (k) => {
  uni.previewImage({
    urls: props.info.annexUrl.split(",").map((i) => webSrc(i)),
    current: k,
  });
};
</script>
<style lang="scss" scoped>
.detail {
  padding: 20rpx;
  .detail-title {
    font-weight: 600;
    font-size: 28rpx;
    color: #212121;
    padding: 20rpx;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 8rpx;
      height: 28rpx;
      transform: translateY(-50%);
      background: #4ea770;
      border-radius: 20rpx;
    }
  }
  .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    .detail-label {
      width: 160rpx;
      font-size: 28rpx;
      color: #757575;
    }
    .detail-value {
      font-size: 28rpx;
      color: #212121;
      flex: 1;
      display: flex;
      justify-content: flex-end;
      view {
        text-align: right;
      }
    }
    .detail-floor {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row-reverse;
      flex: 1;
      .floor-item {
        color: #909399;
        font-size: 24rpx;
        border-radius: 8rpx;
        padding: 6rpx 20rpx;
        border: 2rpx solid #dedede;
        margin: 0 10rpx 10rpx 0;
      }
    }
  }
  .image-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
    width: 100%;
    margin-top: 20rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    .image-item {
      position: relative;
      height: 156rpx;
      overflow: hidden;
      border-radius: 8rpx;
      background: rgba(0, 0, 0, 0.1);
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
